<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/style/styles.css" />
    <script src="/js/jquery-3.6.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <style>
        b{
            font-weight:bolder;
        }

        c{
            text-shadow: -5px 4px 3px black;
            font-size:33px;
            color:rgb(11, 208, 67);
        }
    </style>

    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>

<div class="login-div">
    <br/>
    <div class="title">
        学生成绩管理系统
    </div>

    <div class="fields">
        <div class="username">
            <input tvpe="username" class="user-input" placeholder="学号/工号/管理员账号" id="username" name="username"/>
        </div>

        <div class="password">
            <input type="password" class="pass-input" placeholder="密码" id="password" name="password" />
        </div>
    </div>

    <div class="field">
        <div class="code">
            <input type="code" class="code-input" placeholder="验证码" id="code" name="code" />
        </div>

        <a>&emsp;&emsp;</a>

        <div class="Field">
            <c id="yz" style="cursor:pointer;"> </c>
        </div>
    </div>


    <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

    <input id="teacher" checked type="radio" name="role" value="1" style="margin: 0 10px;">
    <label for="teacher" style="color: white;">教师/管理员&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>

    <input id="student" checked type="radio" name="role" value="2" style="margin: 0 10px;">
    <label for="student" style="color: white;">学生</label>

    <br/><br/><br/><br/>

    <button type="button" id="login" class="signin-button" onclick="login();">登录</button>

</div>

<script type="text/javascript">

    var str="";

    myf();

    function myf(){      //刷新验证码

        var arr = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F',
            'G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');

        str="";

        for(var i=0;i<4;i++){

            var t = Math.round(Math.random()*33);
            str+=arr[t];

        }

        document.getElementById("yz").innerHTML=str;   //图形验证码的字符串属性
    }

    $("#yz").click(function(){     //点击后刷新验证码

        myf();
    })

    function login(){   //登录函数


        var name=$("#username").val();    //用户名

        var password=$("#password").val();     //密码

        var usertype=$("[name='role']:checked").val();    //身份

        var code=$("#code").val();   //验证码

        var len1=document.getElementById("username").value.length;

        var len2=document.getElementById("password").value.length;

        var len3=document.getElementById("code").value.length;

        if(len1==0){

            alert("用户名不能为空");
            return;
        }

        if(len2==0){

            alert("密码不能为空");
            return;
        }
        if(len3==0){

            alert("验证码不能为空");
            return;
        }

        $.ajax({

            url:"/webapi/login/user",
            data:{

                username:name,
                password:password,

            }
        }).done(function (rs){


            if(rs==2 && $("[name='role']:checked").val()==2 && code.toLowerCase()==str.toLowerCase()){

                //学生登录成功
                document.getElementById("username").value='';
                document.getElementById("password").value='';
                document.getElementById("code").value='';
                window.location.href="http://localhost:8080/student/list";
            }

            else if(rs==1 && $("[name='role']:checked").val()==1 && code.toLowerCase()==str.toLowerCase()){

                //教师登录成功
                document.getElementById("username").value='';
                document.getElementById("password").value='';
                document.getElementById("code").value='';
                window.location.href="http://localhost:8080/teacher/LIST";
            }

            else if(rs==3 && $("[name='role']:checked").val()==1 && code.toLowerCase()==str.toLowerCase()){

                //管理员登录成功
                document.getElementById("username").value='';
                document.getElementById("password").value='';
                document.getElementById("code").value='';
                window.location.href="http://localhost:8080/administrator/List";
            }

            else if(rs==2 && $("[name='role']:checked").val()==2 && code.toLowerCase()!=str.toLowerCase()){

                //学生登录验证码错误
                alert("验证码错误！请重试");
                document.getElementById("code").value='';   //清空验证码输入框
                myf();
            }

            else if(rs==1 && $("[name='role']:checked").val()==1 && code.toLowerCase()!=str.toLowerCase()){

                //教师登录验证码错误
                alert("验证码错误！请重试");
                document.getElementById("code").value='';   //清空验证码输入框
                myf();
            }

            else if(rs==3 && $("[name='role']:checked").val()==1 && code.toLowerCase()!=str.toLowerCase()){

                //管理员登录验证码错误
                alert("验证码错误！请重试");
                document.getElementById("code").value='';   //清空验证码输入框
                myf();
            }

            else{
                alert("对不起，用户名或密码错误！请重试");
                document.getElementById("password").value='';   //清空密码
                document.getElementById("code").value='';   //清空验证码输入框
                myf();
            }

        });

    }

    $(document).keydown(function(event){  //回车键登录

        if(event.keyCode==13)
        {
            document.getElementById("login").click();  //login为登录按钮的id
        }
    })

</script>

</body>
</html>